<script lang="ts" setup>
import navigateTo from '@/utils/navigator'

defineProps<{
    color: string
    backgroundColor: string
}>()

function onSearchInputClick() {
    navigateTo('/pages/search/index', {animationType: 'pop-in'})
}
</script>

<template>
    <view class="search_container" @click="onSearchInputClick">
        <image src="@/static/images/icons/index/search_top.svg" w-16rpx h-6rpx mode="scaleToFill"
               class="search_icon_top"/>
        <image src="@/static/images/icons/index/search.svg" w-32rpx h-28rpx mode="scaleToFill" class="search_icon"/>
        <view class="search_input" confirm-type="search">
            <text>请输入搜索内容</text>
        </view>
    </view>
</template>

<style lang="scss" scoped>
.search_container {
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;

    image {
        position: absolute;
        left: 30rpx;
    }

    .search_icon_top {
        top: 35rpx;
        left: 36rpx;
    }

    .search_input {
        height: 60rpx;
        width: 100%;
        background-color: v-bind(backgroundColor);
        font-size: 24rpx;
        border-radius: 25rpx;
        padding-left: 78rpx;

        text {
            color: #a5a1a1;
            line-height: 60rpx;
        }
    }
}
</style>
